<template>
<div>
	<a-button style="margin-bottom: 10px;" class="editable-add-btn" @click="handleAdd">
	  添加
	</a-button>
	<a-table bordered :data-source="dataSource" :columns="columns" :pagination="false">
	  <template slot="name" slot-scope="text, record,index">
		  <a-input v-model="text" @change="onCellChange(index, 'title', text)"/>
	  </template>
	  <template slot="description" slot-scope="text, record,index">
		  <a-input type="textarea" v-model="text" @change="onCellChange(index, 'description', text)"/>
	  </template>
	  <template slot="type" slot-scope="text, record,index">
		  <a-select v-model="text" @change="onCellChange(index, 'type', text)">
		    <a-select-option :value="'0'">主要功能</a-select-option>
		    <a-select-option :value="'1'">核心优势</a-select-option>
		    <a-select-option :value="'2'">应用场景</a-select-option>
		  </a-select>
	  </template>
	  <template slot="fileList" slot-scope="text, record,index">
		  <a-upload
		         action="https://admin.lhlzgroup.com/api/upload/img"
		        list-type="picture-card"
		        :file-list="record.fileList"
		        @preview="handlePreview"
		        @change="handleChange"
				:remove="removeImg"
		      >
		        <div v-if="text.length<1" @click="imgClick(index)">
		          <a-icon type="plus" />
		          <div class="ant-upload-text">
		            Upload
		          </div>
		        </div>
		      </a-upload>
	  </template>
	</a-table>
	<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
	  <img alt="example" style="width: 100%" :src="previewImage" />
	</a-modal>
</div>
</template>
<script>
import {uploadImg} from '@/api/upload.js'	
import {serveCoreCreat,serveCoreList} from '@/api/serve.js'	

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  name: 'addserve',
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
		previewVisible: false,
		previewImage: '',
		dataSource:[],
		count: 0,
		changeImg:0,
		columns:[
        {
          title: '标题',
          dataIndex: 'title',
		   scopedSlots: { customRender: 'name' },
        },
        {
          title: '描述',
          dataIndex: 'description',
		   scopedSlots: { customRender: 'description' },
        },
        {
          title: '类型',
          dataIndex: 'type',
		   scopedSlots: { customRender: 'type' },
        },
        {
          title: '图片',
          dataIndex: 'fileList',
		   scopedSlots: { customRender: 'fileList' },
        }]
    }
  },
  mounted () {
	  this.getList()
  },
  methods: {
	  // 获取列表
	  getList(){
		serveCoreList({id:this.id}).then(res=>{
			if(res.data.list.length>0){
				this.dataSource = res.data.list.map(item=>{
					return {
					 title: item.title,
					 description: item.description,
					 type: item.type,
					 fileList:item.img==''?[]:[
						 {
						   uid: item.id,
						   name: 'image.png',
						   status: 'done',
						   url: this.vuex_src+item.img,
						   response:{
							   url:item.img
						   }
						 }
					 ]
				   }
				})
			}
		})  
	  },
	  imgClick(index){
		this.changeImg = index  
	  },
	  onCellChange(key, dataIndex, value) {
		  console.log(value)
		const dataSource = [...this.dataSource];
		  dataSource[key][dataIndex] = value;
		  this.dataSource = dataSource;
	  },
     handleCancel() {
	   this.previewVisible = false;
	 },
	 async handlePreview(file) {
	   if (!file.url && !file.preview) {
		 file.preview = await getBase64(file.originFileObj);
	   }
	   this.previewImage = file.url || file.preview;
	   this.previewVisible = true;
	 },
	 handleChange({ fileList }) {
		 const dataSource = [...this.dataSource];
		 dataSource[this.changeImg].fileList = fileList;
		 // const dataSource = [...this.dataSource];
		 // dataSource[this.changeImg].img = fileList[0].response.url;
	 },
	 removeImg(file){
		 let that = this;
		 this.dataSource.map((item,index)=>{
			 if(item.fileList[0] == file){
				 that.changeImg = index
			 }
		 })
		new Promise(resolve => {
		  resolve(false)
		})
	 },
	 handleAdd() {
	   const { count, dataSource } = this;
	   const newData = {
		 key: count,
		 title: ``,
		 description: '',
		 type: `0`,
		 fileList:[]
	   };
	   this.dataSource = [...dataSource, newData];
	   this.count = count + 1;
	 },
	 upload(e){
		let formData=new FormData();
		formData.append('file',e.file)
		uploadImg(formData).then(res=>{
		})
	 },
    onOk () {
		let arr = this.dataSource.map(item=>{
			let img = item.fileList.length>0?item.fileList[0].response.url:''
			return [this.id,img,item.title,item.description,item.type]
		})
		 // 创建
		 return new Promise(resolve => {
			serveCoreCreat({coreList:arr}).then(res=>{
			  resolve(true)
			})
		 })
    },
  }
}
</script>
